<template>
    <page-frame>
      <div class="healthAssessment">
        <div class="toptitle">
          <div class="left">健康评估</div>
          <div class="right">
            <div class="btns">
              <el-button @click="addStaff" class="lightGreenBtn">新增评估</el-button>
            </div>
          </div>
        </div>
        <div class="borderT"></div>
        <div class="file-main">
          <div class="input">
            <el-row>
              <el-col style="width: 130px;">
                <div class="input-item">
                  <el-select style="width:90%!important;" v-model="fileId" clearable placeholder="请选择项目" @change="conditionChange">
                    <el-option
                      v-for="item in fileList"
                      :label="item.fileName"
                      :value="item.fileId">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="input-item"   v-show="fileId==1">
                  <el-input v-model="queryData.setName" placeholder="请输入评估项目" style="width:81%!important;">
                  </el-input>
                </div>
                <div class="input-item"   v-show="fileId==3">
                  <el-input v-model="queryData.memberName" placeholder="请输入评估对象" style="width:81%!important;">
                  </el-input>
                </div>
                <div class="input-item"   v-show="fileId==2">
                  <el-select v-model="queryData.status" placeholder="请选择状态" style="width:81%!important;">
                    <el-option
                      v-for="item in processList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="2">
                  <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="tabs">
            <el-table
              :data="tableData"
              border
              highlight-current-row
              @cell-dblclick="schedule=true"
              style="width: 100%">
              <el-table-column
                prop="assessNo"
                label="评估编号"
              >
              </el-table-column>
              <el-table-column
                prop="sheetName"
                label="评估量表名称"
              >
              </el-table-column>
              <el-table-column
                prop="memberName"
                label="评估对象"
              >
              </el-table-column>
              <el-table-column
                prop="emName"
                label="评估员"
              >
              </el-table-column>
              <el-table-column
                prop="timeStart"
                label="开始时间"
              >
              </el-table-column>
              <el-table-column
                prop="timeEnd"
                label="结束时间"
              >
              </el-table-column>
              <el-table-column
                prop="statusName"
                label="状态"
              >
              </el-table-column>
              <el-table-column
                prop="operating"
                label="操作"
                width="180">
                <template scope="scope">
                  <el-button v-show="scope.row.editStatus" type="text" size="small" @click.stop="editSheet(scope.row,1)">继续</el-button>
                  <el-button v-show="scope.row.stopStatus" type="text" size="small" @click.stop="shopSheet(scope.row.assessId,scope.row.memberId)">中止</el-button>
                  <el-button v-show="scope.row.lookStatus" type="text" size="small" @click.stop="lookSheet(scope.row,0)">详细</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="pagination">
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangePage"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </page-frame>
</template>

<script >
  import healthAssessmentApi from '../../service/healthManagement/healthAssessmentApi';
  import common from '../../config/common'
    export default {
      methods: {
        init(){
          this.loadTableData();
        },

        /**
         * 选择项目(清空筛选数据)
         */
        conditionChange(){
          let self = this;
          self.queryData.setName=null;
          self.queryData.memberName = null;
          self.queryData.status=null;
        },

        loadTableData(){
          let self = this;
          healthAssessmentApi.getHealthyAssessments(10,self.currentPage,self.queryData).then(
            (response)=>{
              self.tableData = response.data.data.list;
              self.total = response.data.data.total;
              if (self.tableData.length!=0){
                for(let i=0;i<self.tableData.length;i++) {
                  //判断当前状态
                  switch (this.tableData[i].status) {
                    case 1:
                      self.tableData[i].statusName = "进行中";
                      self.tableData[i].editStatus = true;
                      self.tableData[i].stopStatus = true;
                      self.tableData[i].lookStatus = false;
                      break;
                    case 2:
                      self.tableData[i].statusName = "已完成";
                      self.tableData[i].editStatus = false;
                      self.tableData[i].stopStatus = false;
                      self.tableData[i].lookStatus = true;
                      break;
                    case 3:
                      self.tableData[i].statusName = "已中止";
                      self.tableData[i].editStatus = false;
                      self.tableData[i].stopStatus = false;
                      self.tableData[i].lookStatus = true;
                      break;

                  }
                }
              }
            },
            (response)=>{

            }
          );
        },
        //中止评估量表
        shopSheet(sheetId,memberId){
          let self = this;
          this.$confirm('请确认是否中止本次评估', '中止评估', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            healthAssessmentApi.getHealthyAssessDetail(sheetId,memberId).then(
            (response)=>{
              self.$message({
                type: 'success',
                message: '已成功中止!',
              });
              self.query();
            });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消中止'
          });
        });
        },

        editSheet(obj,status){
          this.$router.push({name:"assessmentDetails",params: {memberObj: obj,status: status}});
        },
        lookSheet(obj,status){
          this.$router.push({name:"assessmentDetails",params: {memberObj: obj,status: status}});
        },
        addStaff(){
          this.$router.push({name: 'assessmentAdd'});
        },
        query(){
          this.loadTableData();
        },
        handleCurrentChange(val) {
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChangePage(val) {
          this.currentPage = val;
          console.log(`当前页: ${val}`);
          this.loadTableData();

        },
      },

      mounted: function () {
        this.init();
      },
      components:{
        'my-compont1':{
//        props:['msg'], /*这里是为子模板传值*/
          template:"<input type='text' value='my-compont1'/>"
        },
        'my-compont2':{
//        props:['msg'], /*这里是为子模板传值*/
          template:"<input type='text' value='my-compont2'/>"
        }
      },
      data () {
            return {
              leaveDate:"",
              leave:false,
              currentPage:1,
              schedule:false,
              queryData:{
                setName:'',
                memberName:'',
                status:'',
              },
              fileId:1,
              fileList:[{
                fileId: 1,
                fileName: "评估项目",
              },{
                fileId: 2,
                fileName: "状态",
              },{
                fileId: 3,
                fileName: "评估对象",
              }],
              processList:[{
                value: '1',
                label: '进行中'
              },{
                value: '3',
                label: '已中止'
              },{
                value: '2',
                label: '已完成'
              }],
              tableData: [{
                "assessId":12,//评估id
                "assessNo":"P123456",//评估编号
                "emId":12,//员工id
                "memberId":22,//会员id
                "sheetName ":"心理评估",//量表名称
                "memberName":"王五",//会员姓名
                "emName":"张三",//员工姓名
                "timeStart":"2017-4-15 10:45",
                "timeEnd":"2017-4-15 13:25",
                "status":"1",
                "statusName":"进行中",
                "lookStatus":true,
                "editStatus":true,
                "stopStatus":true,
              }],
              total:0,
              currentPage: 1,
            }
        },
    }
</script>
<style>

  .healthAssessment .el-input{
    width: 80%;
  }
  .healthAssessment .input input{
    display: inline-block;
  }
  .healthAssessment .scroll{
    height: calc(100vh - 122px);
    padding:0px 50px;
  }
  .healthAssessment .el-pagination{
    margin-right:0!important;
    padding-right:0!important;
  }
  .healthAssessment .el-select {
    display: block;
    position: relative;
  }
</style>
